import React, { useState, useEffect } from "react";
import styles from "./index.module.less";
import * as echarts from "echarts";
import { connect } from "react-redux";
import { getMyGoodsAction } from "@redux/actions";
import actualGmoney from "@utils/actualGmoney";

const GoodsAnalysis = (props) => {
    const { getMyGoodsAction, myGoods } = props;

    const [tabKey, setTabKey] = useState(0);
    const [onSellGoods, setOnSellGoods] = useState([]);
    const [onSellPrice, setOnSellPrice] = useState(0);
    const [offSellGoods, setOffSellGoods] = useState([]);
    const [soldGoods, setSoldGoods] = useState([]);
    const [soldPrice, setSoldPrice] = useState(0);
    const [option, setOption] = useState({});

    const handleClick = () => {
        setTabKey(1);
        let chartsTimer = null;
        chartsTimer = setTimeout(() => {
            const chartDom = document.querySelector(`.${styles.echarts1}`);
            const myChart = echarts.init(chartDom);
            option && myChart.setOption(option);
            clearTimeout(chartsTimer);
        }, 0);
    };

    useEffect(() => {
        getMyGoodsAction();
        let _onSellGodds = myGoods.filter((item) => item.goodsStatus === 1);
        setOnSellGoods(_onSellGodds);
        let _onSellPrice = 0;
        _onSellGodds.forEach((item) => (_onSellPrice += item.price));
        setOnSellPrice(_onSellPrice);
        let _offSellGoods = myGoods.filter((item) => item.goodsStatus === 2);
        setOffSellGoods(_offSellGoods);
        let _soldGoods = myGoods.filter((item) => item.goodsStatus === 3);
        setSoldGoods(_soldGoods);
        let _soldPrice = 0;
        _soldGoods.forEach((item) => (_soldPrice += actualGmoney(item.price)));
        setSoldPrice(_soldPrice);

        /**echarts参数配置项 */
        let _option = {
            title: {
                text: "商品状态解析",
                left: "center",
            },
            tooltip: {
                trigger: "item",
            },
            legend: {
                orient: "vertical",
                left: "left",
            },
            series: [
                {
                    name: "Access From",
                    type: "pie",
                    radius: "50%",
                    data: [
                        { value: _onSellGodds.length, name: "在售" },
                        { value: _offSellGoods.length, name: "已下架" },
                        { value: _soldGoods.length, name: "已售出" },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: "rgba(0, 0, 0, 0.5)",
                        },
                    },
                },
            ],
        };
        setOption(_option);
    }, []); // eslint-disable-line

    return (
        <div className={styles.goodsAnalysis}>
            <div className={styles.tabs}>
                <span
                    className={`${styles.tab1} ${
                        tabKey === 0 ? styles.active : ""
                    }`}
                    onClick={() => {
                        setTabKey(0);
                    }}
                >
                    文字解析
                </span>
                <span
                    className={tabKey === 1 ? styles.active : ""}
                    onClick={handleClick}
                >
                    图形解析
                </span>
            </div>
            <div className={styles.content}>
                {tabKey === 0 ? (
                    <div className={styles.content1}>
                        <p>您已上架过{myGoods.length}件(次)商品，其中：</p>
                        <p>
                            在售{onSellGoods.length}件，总价值{onSellPrice}G币；
                            <br />
                            下架{offSellGoods.length}件，
                            <br />
                            已售出{soldGoods.length}件，共赚取{soldPrice}G币
                            <br />
                        </p>
                    </div>
                ) : (
                    <div className={styles.content2}>
                        <div className={styles.echarts1}></div>
                    </div>
                )}
            </div>
        </div>
    );
};

export default connect((state) => ({ myGoods: state.getMyGoodsReducer }), {
    getMyGoodsAction,
})(GoodsAnalysis);
